<template>
  <div class="selectBox">
    <div class="flex justify_between align_center">
      <!-- <div
        class="selectLeft content3 font400 color6"
        @click="showChoose"
      >
        {{ selectName ? selectName : '行业筛选' }}
      </div> -->
      <div class="selectRight">
        <van-search
          v-model="form.keyword"
          placeholder="你想找的人脉都有"
          @search="onSearch"
        />
      </div>
    </div>
  </div>
  <div>
    <van-pull-refresh
      v-model="refreshing"
      disabled
      @refresh="onRefresh"
      class="refresh-content"
    >
      <van-list
        class="content-list"
        v-model:loading="loading"
        :finished="finished"
        @load="loadMore"
        :immediate-check="false"
      >
        <div class="user-card">
          <div
            class="user-card-item"
            v-for="(item,index) in listData"
            :key="index"
          >
            <div
              class="left"
              @click="goCard(item.user_id)"
            >
              <div>
                <img
                  :src="item.head_img"
                  class="avatar"
                >
              </div>
              <div class="info">
                <p class="position color1 fontBold content3">
                  {{ item.username }}
                </p>
                <p
                  class="company van-ellipsis color3 font400 content3"
                >
                  {{ item.company }}
                </p>
              </div>
            </div>
            <div>
              <svg
                v-if="item.is_friend === 1"
                @click="phone(item.phone)"
                class="excellent"
                aria-hidden="true"
              >
                <use xlink:href="#icon-dianhua" />
              </svg>

              <!-- v-if="item.is_friend === 0" -->
              <svg
                v-if="item.is_friend === 0"
                @click="addUser(item.id)"
                class="excellent"
                aria-hidden="true"
              >
                <use xlink:href="#icon-jiaohuanmingpian" />
              </svg>
            </div>
            <van-row
              class="ptop"
              v-if="item.is_exchange === '0'"
            >
              <van-col span="12">
                <van-button
                  block
                  class="frist"
                  size="small"
                  @click.stop="handleReject()"
                >
                  拒绝交换
                </van-button>
              </van-col>
              <van-col span="12">
                <van-button
                  block
                  class="last"
                  size="small"
                  type="danger"
                  @click.stop="handleAgree()"
                >
                  同意交换
                </van-button>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
  <NoData v-if="listData.length === 0" />
  <Choose
    :columns="columns"
    :visible="visible"
    :type="type"
    @closeDialog="closeDialog"
    @confirmValue="confirmValue"
  />
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
import { getexchangehandle } from '@/api'
import { Toast, Dialog } from 'vant'
const NoData = defineAsyncComponent(() => import('@/components/NoData/index.vue'))
const Choose = defineAsyncComponent(() => import('@/components/Choose/index.vue'))
const loading: any = ref(false)
const finished: any = ref(false)
const refreshing: any = ref(false)
const router = useRouter()
const listData: any = ref([])
const selectName: any = ref('')
const visible: any = ref(false)
const columns: any = ref(['地产商', '供应商'])
const type: any = ref(0)
const form: any = ref({
  page: 1,
  pageSize: 10,
  type: '',
  keyword: ''
})

const closeDialog = () => {
  visible.value = false
}

const goCard = async (id: any) => {
  router.push({ path: '/square/contacts', query: { id: id } })
}

// const showChoose = () => {
//   visible.value = true
// }

const confirmValue = (val: any, type: any, index:any) => {
  form.value.type = index
  selectName.value = val
  onRefresh()
  visible.value = false
}

const onSearch = async (val:any) => {
  form.value.keyword = val
  onRefresh()
}

const phone = async (i:any) => {
  window.location.href = 'tel://' + i
}

const addUser = async (id:any) => {
  try {
    Dialog.alert({
      message: '您的交换名片申请已提交，请耐心等待用户审核',
      confirmButtonColor: '#FF7A1F'
    }).then(() => {
    // on close
    })
  } catch (error:any) {
    Toast(error.message)
  }
}

const handleReject = async () => {
}

const handleAgree = async () => {
}

const onRefresh = async () => {
  form.value.page = 1
  const list = await loadDemandList()
  listData.value = list
  refreshing.value = false
}

const loadMore = async () => {
  form.value.page = form.value.page + 1
  const list = await loadDemandList()
  listData.value = [...listData.value, ...list]
  loading.value = false
}

const loadDemandList = async () => {
  // 异步更新数据
  const res: any =
        (await getexchangehandle({ ...form.value })) || []
  if (!Array.isArray(res) && typeof res.list === 'object') {
    const keys: any = Object.keys(res.list)
    const newRes: any = keys.map((k: any) => res.list[k])
    finished.value = newRes.length < form.value.pageSize
    return newRes
  }

  finished.value = res.list.length < form.value.pageSize
  return res
}

onRefresh()

</script>

<style lang="less" scoped>
.user-card-item {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 15px 0;
    .excellent {
        width: 25px;
        height: 25px;
        margin-right: 14px;
    }

    .left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 14px;
        .info {
            margin-left: 14px;
        }
    }
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
    .position {
    }
    .name {
    }
    .company {
        margin-top: 15px;
    }
}
.selectBox {
    margin-top: 20px;
    .selectLeft {
        width: 130px;
        height: 44px;
        background: #ffffff;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
    }
    .selectRight {
           // 196px
        width: 100%;
        background: #ffffff;
        border-radius: 5px;
        overflow: hidden;
    }
}

@media (min-width: 750px) {
  .user-card-item {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 15px 0;
    .excellent {
        width: 25px;
        height: 25px;
        margin-right: 14px;
    }

    .left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 14px;
        .info {
            margin-left: 14px;
        }
    }
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
    .position {
    }
    .name {
    }
    .company {
        margin-top: 15px;
    }
}
.selectBox {
    margin-top: 20px;
    .selectLeft {
        width: 130px;
        height: 44px;
        background: #ffffff;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
    }
    .selectRight {
           // 196px
        width: 100%;
        background: #ffffff;
        border-radius: 5px;
        overflow: hidden;
    }
}
}
</style>
